<template>
  <div id="readerPage">
    <HeadNav
      type="publish"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="publish" sort="reader"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <!-- 读者概况 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">读者概况</div>
                <div class="data-choose" style="padding: 20px 15px">
                  <span class="data-block">
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">读者基数</span>
                    </div>
                    <div class="data-font">
                      {{ readerBase.toLocaleString() }}
                    </div>
                  </span>
                  <span class="data-block">
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">人均购买</span>
                    </div>
                    <div class="data-font">{{ readerAverage }}本</div>
                  </span>
                </div>
              </div>
            </div>
            <!-- 基础特征 -->
            <div class="model-container basic">
              <div class="model-bg">
                <div class="section-title">基础特征</div>
                <div class="feature">
                  <div class="clearfix" style="padding: 15px">
                    <div class="float-left" style="width: 500px">
                      <div style="font-size: 12px">性别分布</div>
                      <div v-if="ringData1.length > 0">
                        <div
                          id="ring1"
                          style="
                            width: 400px;
                            margin-top: 20px;
                            margin-left: 30px;
                          "
                        ></div>
                      </div>
                      <div style="width: 500px" v-else>
                        <div class="no-data">数据量较小，暂不支持分析</div>
                      </div>
                      <div style="margin-top: 20px; font-size: 12px">
                        近一年消费
                      </div>
                      <div v-if="ringData2.length > 0">
                        <div
                          id="ring2"
                          style="
                            width: 266px;
                            margin-left: 90px;
                            margin-top: 20px;
                          "
                        ></div>
                        <div class="column" style="width: 270px">
                          <a-row type="flex" justify="space-around">
                            <a-col
                              v-for="(item, index) in ringData2"
                              :key="index"
                            >
                              <div class="column-num">{{ item.value }}%</div>
                              <div class="column-name">{{ item.name }}</div>
                            </a-col>
                          </a-row>
                        </div>
                      </div>
                      <div style="width: 500px" v-else>
                        <div class="no-data">数据量较小，暂不支持分析</div>
                      </div>
                    </div>
                    <div
                      class="float-left"
                      style="margin-left: 10px; width: 500px"
                    >
                      <div style="margin-left: 40px; font-size: 12px">
                        年龄分布
                      </div>
                      <div v-if="columnData1.length > 0">
                        <div
                          id="column1"
                          style="
                            width: 400px;
                            margin-left: 90px;
                            margin-top: 20px;
                          "
                        ></div>
                        <div class="column">
                          <a-row>
                            <a-col
                              :span="4"
                              v-for="(item, index) in columnData1"
                              :key="index"
                            >
                              <div class="column-num">{{ item.value }}%</div>
                              <div class="column-name">{{ item.name }}</div>
                            </a-col>
                          </a-row>
                        </div>
                      </div>
                      <div style="width: 500px; margin-left: 38px" v-else>
                        <div class="no-data">数据量较小，暂不支持分析</div>
                      </div>
                      <div
                        style="
                          font-size: 12px;
                          margin-top: 45px;
                          margin-left: 40px;
                        "
                      >
                        <span
                          style="
                            display: inline-block;
                            vertical-align: top;
                            padding-top: 1px;
                          "
                          >城市层级</span
                        >
                        <span
                          style="cursor: pointer; font-size: 15px"
                          @click="openModal"
                        >
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tips" />
                          </svg>
                        </span>
                      </div>
                      <div v-if="columnData2.length > 0">
                        <div
                          id="column2"
                          style="
                            width: 400px;
                            margin-left: 90px;
                            margin-top: 20px;
                          "
                        ></div>
                      </div>
                      <div style="width: 500px; margin-left: 38px" v-else>
                        <div class="no-data">数据量较小，暂不支持分析</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 地域 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">地域</div>
                <div
                  class="clearfix"
                  style="padding-bottom: 15px"
                  v-if="barData1.length > 0"
                >
                  <div
                    class="float-left"
                    style="position: relative; margin-top: 15px"
                  >
                    <div id="map" style="height: 284px; width: 520px"></div>
                  </div>
                  <div
                    class="float-left"
                    style="width: 500px; margin-left: 45px"
                  >
                    <p style="margin-top: 15px; font-size: 12px">地域（省）</p>
                    <div id="bar-chart1"></div>
                  </div>
                </div>
                <div class="no-data" v-else>数据量较小，暂不支持分析</div>
              </div>
            </div>
            <!-- 偏好 -->
            <!-- <div class="model-container">
              <div class="model-bg">
                <div class="section-title">偏好</div>
                <div class="clearfix" style="padding: 10px 15px 15px 15px">
                  <div
                    class="float-left"
                    style="width: 500px; margin-right: 50px"
                  >
                    <p style="font-size: 12px">类目偏好</p>
                    <div v-if="barData2.length > 0">
                      <div id="bar-chart2"></div>
                    </div>
                    <div class="no-data" v-else>数据量较小，暂不支持分析</div>
                  </div>
                  <div class="float-left" style="width: 500px">
                    <p style="font-size: 12px">作家偏好</p>
                    <div v-if="barData3.length > 0">
                      <div id="bar-chart3"></div>
                    </div>
                    <div class="no-data" v-else>数据量较小，暂不支持分析</div>
                  </div>
                </div>
              </div>
            </div> -->
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
    <!-- 展示城市层级弹层 -->
    <a-modal
      v-model="cityModal"
      width="1000px"
      :footer="null"
      :title="null"
      destroyOnClose
      on-ok="readhandleOk"
    >
      <div class="popup">
        <div class="city">
          <div class="city-title">一线城(4个)</div>
          <div class="city-content">北京、上海、广州、深圳</div>
        </div>
        <div class="city">
          <div class="city-title">新一线城(15个)</div>
          <div class="city-content">
            成都、重庆、杭州、武汉、西安、郑州、青岛、长沙、天津、苏州、南京、东莞、沈阳、合肥、佛山
          </div>
        </div>
        <div class="city">
          <div class="city-title">二线城(30个)</div>
          <div class="city-content">
            昆明、福州、无锡、厦门、哈尔滨、长春、南昌、济南、宁波、大连、贵阳、温州、石家庄、泉州、南宁、金华、常州、珠海、惠州、嘉兴、南通、中山、保定、兰州、台州、徐州、太原、绍兴、烟台、廊坊
          </div>
        </div>
        <div class="city">
          <div class="city-title">三线城(70个)</div>
          <div class="city-content">
            海口、汕头、潍坊、扬州、洛阳、乌鲁木齐、临沂、唐山、镇江、盐城、湖州、赣州、漳州、揭阳、江门、桂林、邯郸、泰州、济宁、呼和浩特、咸阳、芜湖、三亚、阜阳、淮安、遵义、银川、衡阳、上饶、柳州、淄博、莆田、绵阳、湛江、商丘、宜昌、沧州、连云港、南阳、蚌埠、驻马店、滁州、邢台、潮州、秦皇岛、肇庆、荆州、周口、马鞍山、清远、宿州、威海、九江、新乡、信阳、襄阳、岳阳、安庆、菏泽、宜春、黄冈、泰安、宿迁、株洲、宁德、鞍山、南充、六安、大庆、舟山
          </div>
        </div>
        <div class="city">
          <div class="city-title">四线城(90个)</div>
          <div class="city-content">
            常德、渭南湖、孝感、丽水、运城、德州、张家口、鄂尔多斯、阳江、泸州、丹东、曲靖、乐山、许昌、湘潭、晋中、安阳、齐齐哈尔、北海、宝鸡、抚州、景德镇、延安、三明、抚顺、亳州、日照、西宁、衢州、拉萨、淮北、焦作、平顶山、滨州、吉安、濮阳、眉山、池州、荆门、铜仁、长治、衡水、铜陵、承德、达州、邵阳、德阳、龙岩、南平、淮南、黄石、营口、东营、吉林、韶关、枣庄、包头、怀化、宣城、临汾、聊城、梅州、盘锦、锦州、榆林、玉林、十堰、汕尾、咸宁、宜宾、永州、益阳、黔南州、黔东南、恩施、红河、大理、大同、鄂州、忻州、吕梁、黄山、开封、郴州、茂名、漯河、葫芦岛、河源、娄底、延边
          </div>
        </div>
        <div class="city">
          <div class="city-title">五线城(128个)</div>
          <div class="city-content">
            汉中、辽阳、四平、内江、六盘水、安顺、新余、牡丹江、晋城、自贡、三门峡、赤峰、本溪、防城港、铁岭、随州、广安、广元、天水、遂宁、萍乡、西双版纳、绥化、鹤壁、湘西、松原、阜新、酒泉、张家界、黔西南、保山、昭通、河池、来宾、玉溪、梧州、鹰潭、钦州、云浮、佳木斯、克拉玛依、呼伦贝尔、贺州、通化、阳泉、朝阳、百色、毕节、贵港、丽江、安康、通辽、德宏、朔州、伊犁、文山、楚雄、嘉峪关、凉山、资阳、锡林郭勒盟、雅安、普洱、崇左、庆阳、巴音郭楞（巴州）、乌兰察布、白山、昌吉、白城、兴安盟、定西、喀什、白银、陇南、巴彦淖尔、巴中、鸡西、乌海、临沧、海东、张掖、商洛、黑河、哈密、吴忠、攀枝花、双鸭山、阿克苏、石嘴山、阿拉善盟、海西、平凉、林芝、固原、武威、儋州、吐鲁番、甘孜、辽源、临夏、铜川、金昌、鹤岗、伊春、中卫、怒江、和田、迪庆、甘南、阿坝、大兴安岭、七台河、山南、日喀则、塔城、博尔塔拉、昌都、阿勒泰、玉树、海南、黄南、果洛、克孜勒苏、阿里、海北、那曲、三沙
          </div>
        </div>
        <div style="padding: 0 280px; margin-top: 20px">
          <div id="cityChart" style="width: 400px"></div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<style scoped lang="scss">
#readerPage {
  padding-bottom: 20px;
  & .data-block {
    display: inline-block;
    width: 220px;
    padding: 10px 15px;
    background-color: $themeColor5;
    margin-right: 10px;
  }
  & .no-data {
    padding: 118px 0;
    font-size: $fontSize - 2;
    text-align: center;
  }
  & .column {
    width: 400px;
    margin-left: 90px;
    font-size: $fontSize - 2;
    margin-top: 27px;
    & .column-num {
      color: $fontColor1;
      text-align: center;
      font-weight: 600;
      white-space: nowrap;
    }
    & .column-name {
      text-align: center;
      white-space: nowrap;
    }
  }
}
.popup {
  padding: 20px;
  & .city {
    margin-bottom: 5px;
    font-size: $fontSize - 2;
    & .city-title {
      color: $fontColor1;
      font-weight: bold;
    }
    & .city-content {
      color: $fontColor2;
    }
  }
}
</style>
<script>
import { Chart, registerShape } from "@antv/g2";
import { Scene } from "@antv/l7";
import { CountryLayer } from "@antv/l7-district";
import { Mapbox } from "@antv/l7-maps";
import { READER_BASE } from "../../apis/publish.js";
export default {
  data() {
    return {
      pagePower: true,
      readerBase: 0,
      readerAverage: 0,
      ringData1: [],
      ringChange1: null,
      ringData2: [],
      ringChange2: null,
      columnData1: [],
      columnChange1: null,
      columnData2: [],
      columnChange2: null,
      barData1: [],
      barChange1: null,
      barData2: [],
      barChange2: null,
      barData3: [],
      barChange3: null,
      barMapData: [],
      isLoading: true,
      cityModal: false,
      popupCityChart: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await READER_BASE(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.ringData1 = [];
        this.ringData2 = [];
        this.columnData1 = [];
        this.columnData2 = [];
        this.barData1 = [];
        this.barData2 = [];
        this.barData3 = [];
        if (Object.keys(res.data).length > 0) {
          let _total1 = 0,
            _total2 = 0,
            _total3 = 0,
            _total4 = 0;
          this.readerBase = res.data.reader_num;
          this.readerAverage = res.data.reader_avg_buy;
          // 性别分布
          res.data.persona_sex.map((value, key) => {
            _total1 += Number(value.value);
          });
          if (_total1 > 0) {
            for (let i = 0; i < 3; i++) {
              let _obj = {
                value: 0,
              };
              if (i == 0) {
                _obj.name = "男性";
              } else if (i == 1) {
                _obj.name = "女性";
              } else if (i == 2) {
                _obj.name = "未知";
              }
              this.ringData1.push(_obj);
            }
            res.data.persona_sex.map((value, key) => {
              let _num = (Number(value.value) / _total1) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (value.name == "男") {
                this.ringData1[0].value = _num;
              } else if (value.name == "女") {
                this.ringData1[1].value = _num;
              } else if (value.name == "未知") {
                this.ringData1[2].value = _num;
              }
            });
          }
          // 消费能力
          res.data.persona_money.map((value, key) => {
            _total2 += Number(value.value);
          });
          if (_total2 > 0) {
            for (let i = 0; i < 4; i++) {
              let _obj = {
                value: 0,
                type: "this",
              };
              if (i == 0) {
                _obj.name = "30元以下";
              } else if (i == 1) {
                _obj.name = "30-60元";
              } else if (i == 2) {
                _obj.name = "60-100元";
              } else if (i == 3) {
                _obj.name = "100元以上";
              }
              this.ringData2.push(_obj);
            }
            res.data.persona_money.map((value, key) => {
              let _num = (Number(value.value) / _total2) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (value.name == "低消费") {
                this.ringData2[0].value = _num;
              } else if (value.name == "中低消费") {
                this.ringData2[1].value = _num;
              } else if (value.name == "中高消费") {
                this.ringData2[2].value = _num;
              } else if (value.name == "高消费") {
                this.ringData2[3].value = _num;
              }
            });
          }
          // 年龄分布
          res.data.persona_age.map((value, key) => {
            _total3 += Number(value.value);
          });
          if (_total3 > 0) {
            for (let i = 0; i < 6; i++) {
              let _obj = {
                value: 0,
                type: "this",
              };
              if (i == 0) {
                _obj.name = "18-25岁";
              } else if (i == 1) {
                _obj.name = "26-30岁";
              } else if (i == 2) {
                _obj.name = "31-35岁";
              } else if (i == 3) {
                _obj.name = "36-40岁";
              } else if (i == 4) {
                _obj.name = "41-50岁";
              } else if (i == 5) {
                _obj.name = "51岁以上";
              }
              this.columnData1.push(_obj);
            }
            res.data.persona_age.map((value, key) => {
              let _num = (Number(value.value) / _total3) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (value.name == "小年轻") {
                this.columnData1[0].value = _num;
              } else if (value.name == "青年") {
                this.columnData1[1].value = _num;
              } else if (value.name == "青壮年") {
                this.columnData1[2].value = _num;
              } else if (value.name == "中青年") {
                this.columnData1[3].value = _num;
              } else if (value.name == "中年") {
                this.columnData1[4].value = _num;
              } else if (value.name == "中老年") {
                this.columnData1[5].value = _num;
              }
            });
          }
          // 城市层级
          if (res.data.persona_city) {
            res.data.persona_city.map((value, key) => {
              _total4 += Number(value.value);
            });
            if (_total4 > 0) {
              for (let i = 0; i < 6; i++) {
                let _obj = {
                  value: 0,
                };
                if (i == 0) {
                  _obj.name = "一线城市";
                } else if (i == 1) {
                  _obj.name = "二线城市";
                } else if (i == 2) {
                  _obj.name = "三线城市";
                } else if (i == 3) {
                  _obj.name = "四线城市";
                } else if (i == 4) {
                  _obj.name = "五线城市";
                } else if (i == 5) {
                  _obj.name = "新一线城市";
                }
                this.columnData2.push(_obj);
              }
              res.data.persona_city.map((value, key) => {
                let _num = (Number(value.value) / _total4) * 100;
                _num = _num ? Number(_num.toFixed(2)) : 0.0;
                if (value.name == "一线城市") {
                  this.columnData2[0].value = _num;
                } else if (value.name == "二线城市") {
                  this.columnData2[1].value = _num;
                } else if (value.name == "三线城市") {
                  this.columnData2[2].value = _num;
                } else if (value.name == "四线城市") {
                  this.columnData2[3].value = _num;
                } else if (value.name == "五线城市") {
                  this.columnData2[4].value = _num;
                } else if (value.name == "新一线城市") {
                  this.columnData2[5].value = _num;
                }
              });
            }
          }
          this.barData1 = res.data.persona_region.map((value, key) => {
            this.barMapData.push(value.name);
            value.name = value.name;
            return value;
          });
          this.barData2 = res.data.persona_cate.map((value, key) => {
            value.name = value.name;
            return value;
          });
          this.barData3 = res.data.persona_author.map((value, key) => {
            value.name = value.name;
            return value;
          });
          let _this = this;
          this.$nextTick(() => {
            if (_this.ringData1.length > 0) {
              if (_this.ringChange1) {
                _this.ringChange1.destroy();
                _this.initRing1();
              } else {
                _this.initRing1();
              }
            }
            if (_this.ringData2.length > 0) {
              if (_this.ringChange2) {
                _this.ringChange2.destroy();
                _this.initRing2();
              } else {
                _this.initRing2();
              }
            }
            if (_this.columnData1.length > 0){
              if (_this.columnChange1) {
                _this.columnChange1.destroy();
                _this.initColumn1();
              } else {
                _this.initColumn1();
              }
            }
            if (_this.columnData2.length > 0){
              if (_this.columnChange2) {
                _this.columnChange2.destroy();
                _this.initColumn2();
              } else {
                _this.initColumn2();
              }
            }
            if (_this.barData1.length > 0) {
              _this.initMap();
            }
            if (_this.barData1.length > 0) {
              if (_this.barChange1) {
                _this.barChange1.destroy();
                _this.inintBar1();
              } else {
                _this.inintBar1();
              }
            }
            // if (_this.barData2.length > 0) {
            //   if (_this.barChange2) {
            //     _this.barChange2.destroy();
            //     _this.inintBar2();
            //   } else {
            //     _this.inintBar2();
            //   }
            // }
            // if (_this.barData3.length > 0) {
            //   if (_this.barChange3) {
            //     _this.barChange3.destroy();
            //     _this.inintBar3();
            //   } else {
            //     _this.inintBar3();
            //   }
            // }
            _this.isLoading = false;
          });
        } else {
          this.isLoading = false;
        }
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 打开城市弹层
    openModal() {
      this.cityModal = true;
      this.$nextTick(() => {
        this.initPopupChart();
      });
    },
    // 性别分布饼图
    initRing1() {
      let data = this.ringData1;
      this.ringChange1 = new Chart({
        container: "ring1",
        autoFit: true,
        padding: [-80, 0, 0, 0],
        height: 234,
      });
      this.ringChange1.data(data);
      this.ringChange1.legend(false);
      this.ringChange1.tooltip(false);
      this.ringChange1.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "男性") {
            color = "#2B6AE7";
          } else if (data[0].name === "女性") {
            color = "#EA5D73";
          } else if (data[0].name === "未知") {
            color = "#FF8C3F";
          }
          data.push({ name: "其他", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 23,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      this.ringChange1.render();
    },
    // 消费柱状图
    initRing2() {
      let _this = this,
        data = [],
        _arr = [];
      this.ringData2.map((value, key) => {
        let _obj = {
          value: 100 - value.value,
          name: value.name,
          type: "other",
        };
        _arr.push(_obj);
      });
      data = [..._arr, ...this.ringData2];
      this.ringChange2 = new Chart({
        container: "ring2",
        autoFit: true,
        autoHide: false,
        padding: [10, 0, 0, 0],
        height: 140,
      });
      this.ringChange2.data(data);
      this.ringChange2.scale("value", {
        nice: true,
      });
      this.ringChange2.axis(false);
      this.ringChange2.axis(false);
      this.ringChange2.tooltip(false);
      this.ringChange2.interaction("active-region");
      this.ringChange2.legend(false);
      this.ringChange2
        .interval()
        .position("name*value")
        .color("name*type", (val, type) => {
          if (val == "30元以下" && type == "this") {
            return "#26A4D0";
          } else if (val == "30-60元" && type == "this") {
            return "#4179EA";
          } else if (val == "60-100元" && type == "this") {
            return "#685FA7";
          } else if (val == "100元以上" && type == "this") {
            return "#F5A726";
          } else {
            return "#EDF6FC";
          }
        })
        .adjust("stack");
      this.ringChange2.render();
    },
    // 年龄分布柱状图
    initColumn1() {
      let _this = this,
        data = [],
        _arr = [];
      this.columnData1.map((value, key) => {
        let _obj = {
          value: 100 - value.value,
          name: value.name,
          type: "other",
        };
        _arr.push(_obj);
      });
      data = [..._arr, ...this.columnData1];
      this.columnChange1 = new Chart({
        container: "column1",
        autoFit: true,
        autoHide: false,
        padding: [10, 0, 0, 0],
        height: 140,
      });
      this.columnChange1.data(data);
      this.columnChange1.scale("value", {
        nice: true,
      });
      this.columnChange1.axis(false);
      this.columnChange1.axis(false);
      this.columnChange1.tooltip(false);
      this.columnChange1.interaction("active-region");
      this.columnChange1.legend(false);
      this.columnChange1
        .interval()
        .position("name*value")
        .color("name*type", (val, type) => {
          if (val == this.columnData1[0].name && type == "this") {
            return "#7079E0";
          } else if (val == this.columnData1[1].name && type == "this") {
            return "#D15B7E";
          } else if (val == this.columnData1[2].name && type == "this") {
            return "#FC6E6C";
          } else if (val == this.columnData1[3].name && type == "this") {
            return "#FFA06B";
          } else if (val == this.columnData1[4].name && type == "this") {
            return "#FFB64D";
          } else if (val == this.columnData1[5].name && type == "this") {
            return "#FFDB3F";
          } else {
            return "#EDF6FC";
          }
        })
        .adjust("stack");
      this.columnChange1.render();
    },
    // 城市层级饼图
    initColumn2() {
      let _num = (
          this.columnData2[0].value +
          this.columnData2[1].value +
          this.columnData2[5].value
        ).toFixed(2),
        _num1 = (this.columnData2[2].value + this.columnData2[3].value).toFixed(
          2
        );
      let data = [
        {
          name: "一二线城市",
          value: Number(_num),
        },
        {
          name: "三四线城市",
          value: Number(_num1),
        },
        { name: "五线城市", value: this.columnData2[4].value },
      ];
      this.columnChange2 = new Chart({
        container: "column2",
        autoFit: true,
        padding: [-80, 0, 0, 0],
        height: 234,
      });
      this.columnChange2.data(data);
      this.columnChange2.legend(false);
      this.columnChange2.tooltip(false);
      this.columnChange2.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "一二线城市") {
            color = "#EB5E13";
          } else if (data[0].name === "三四线城市") {
            color = "#FFDD58";
          } else if (data[0].name === "五线城市") {
            color = "#F8E692";
          }
          data.push({ name: "未知", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 25,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      this.columnChange2.render();
    },
    // 弹层城市层级饼图
    initPopupChart() {
      let data = [
        {
          name: "一二线城市人口",
          value: 31.0,
        },
        {
          name: "三四线城市人口",
          value: 51.0,
        },
        { name: "五线城市人口", value: 18.0 },
      ];
      this.popupCityChart = new Chart({
        container: "cityChart",
        autoFit: true,
        padding: [-80, 0, 0, 0],
        height: 200,
      });
      this.popupCityChart.data(data);
      this.popupCityChart.legend(false);
      this.popupCityChart.tooltip(false);
      this.popupCityChart.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "一二线城市人口") {
            color = "#EB5E13";
          } else if (data[0].name === "三四线城市人口") {
            color = "#FFDD58";
          } else if (data[0].name === "五线城市人口") {
            color = "#F8E692";
          }
          data.push({ name: "未知", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 25,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      this.popupCityChart.render();
    },
    // 渲染地图
    initMap() {
      let _this = this;
      const scene = new Scene({
        id: "map",
        logoVisible: false,
        map: new Mapbox({
          center: [116.2825, 39.9],
          pitch: 0,
          style: "blank",
          zoom: 3,
          minZoom: 1,
          maxZoom: 10,
        }),
      });
      scene.setMapStatus({
        dragEnable: false, //是否允许地图拖拽
        keyboardEnable: false, // 是否允许形键盘事件
        doubleClickZoom: false, // 双击放大
        zoomEnable: false, // 滚动缩放
        rotateEnable: false, // 旋转
      });
      const attachMapContainer = document.createElement("div");
      attachMapContainer.id = "attach";
      attachMapContainer.style.cssText =
        "position: absolute;height:80px;width:50px;right:50px;bottom:20px;border:1px solid #F4F7FD;";
      document.getElementById("map").parentElement.append(attachMapContainer);

      scene.on("loaded", () => {
        new CountryLayer(scene, {
          data: [],
          joinBy: ["NAME_CHN", "name"],
          depth: 1,
          provinceStroke: "#FFF",
          stroke: "#D1DDF5",
          countyStroke: "#FFF",
          cityStroke: "#FFF",
          cityStrokeWidth: 0,
          // chinaNationalWidth: 0,
          coastlineWidth: 0,
          chinaNationalStroke: "#D1DDF5",
          label: {
            enable: false,
          },
          fill: {
            color: {
              field: "NAME_CHN",
              values:
                ("name",
                function (value) {
                  let _arr = _this.barMapData;
                  if (value.indexOf(_arr[0]) > -1 && _arr[0]) {
                    return "#4777D8";
                  } else if (value.indexOf(_arr[1]) > -1 && _arr[1]) {
                    return "#6E94E1";
                  } else if (value.indexOf(_arr[2]) > -1 && _arr[2]) {
                    return "#82A3E5";
                  } else if (value.indexOf(_arr[3]) > -1 && _arr[3]) {
                    return "#96B2E8";
                  } else if (value.indexOf(_arr[4]) > -1 && _arr[4]) {
                    return "#A0B9EA";
                  } else if (value.indexOf(_arr[5]) > -1 && _arr[5]) {
                    return "#BDCEF1";
                  } else {
                    return "#D1DDF5";
                  }
                }),
            },
            activeColor: "#4777D8",
          },
          popup: {
            enable: true,
            Html: (props) => {
              return `<span>${props.NAME_CHN}</span>`;
            },
          },
        });
      });
      // 添加附图，附图需要和主图保持一致
      const scene2 = new Scene({
        id: "attach",
        logoVisible: false,
        map: new Mapbox({
          center: [113.60540108435657, 12.833692637803168],
          pitch: 0,
          style: "blank",
          zoom: 1.93,
          minZoom: 0,
          maxZoom: 3,
          interactive: false,
        }),
      });
      scene2.on("loaded", () => {
        new CountryLayer(scene2, {
          data: [],
          label: {
            enable: false,
          },
          popup: {
            enable: true,
          },
          autoFit: false,
          depth: 1,
          fill: {
            color: {
              field: "NAME_CHN",
              values: [
                "#feedde",
                "#fdd0a2",
                "#fdae6b",
                "#fd8d3c",
                "#e6550d",
                "#a63603",
              ],
            },
          },
        });
      });
    },
    // 渲染地域条形图
    inintBar1() {
      let _height = this.barData1.length * 26;
      this.barChange1 = new Chart({
        container: "bar-chart1",
        autoFit: true,
        height: _height,
      });
      this.barChange1.data(this.barData1.reverse());
      this.barChange1.scale({
        value: {
          max: 150,
          min: 0,
          alias: " ",
        },
      });
      this.barChange1.axis("name", {
        title: null,
        tickLine: null,
        grid: null,
        line: null,
        label: {
          textStyle: {
            textAlign: "left",
          },
        },
      });

      this.barChange1.axis("value", {
        label: null,
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              fillOpacity: 0,
              strokeOpacity: 0,
            },
          },
        },
        title: null,
      });
      this.barChange1.legend(false);
      this.barChange1.coordinate().transpose();
      this.barChange1.tooltip(false);
      this.barChange1
        .interval()
        .position("name*value")
        .size(8)
        .label("value", {
          style: {
            fill: "#7789af",
            autoHide: false | true,
          },
          // offset: 10,
          content: (originData) => {
            return originData.value + "%";
          },
          remove: false,
        });
      // chart.interaction("element-active");
      this.barChange1.render();
    },
    // 渲染类目偏好条形图
    inintBar2() {
      let _height = this.barData2.length * 26;
      this.barChange2 = new Chart({
        container: "bar-chart2",
        autoFit: true,
        autoHide: false,
        height: _height,
      });
      this.barChange2.data(this.barData2.reverse());
      this.barChange2.scale({
        value: {
          max: 150,
          min: 0,
          alias: " ",
        },
      });
      this.barChange2.axis("name", {
        title: null,
        tickLine: null,
        grid: null,
        line: null,
      });

      this.barChange2.axis("value", {
        label: null,
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              fillOpacity: 0,
              strokeOpacity: 0,
            },
          },
        },
        title: null,
      });
      this.barChange2.legend(false);
      this.barChange2.coordinate().transpose();
      this.barChange2.tooltip(false);
      this.barChange2
        .interval()
        .position("name*value")
        .size(8)
        .label("value", {
          style: {
            fill: "#7789af",
            autoHide: false,
          },
          // offset: 10,
          content: (originData) => {
            return originData.value + "%";
          },
          remove: false,
        });
      // chart.interaction("element-active");
      this.barChange2.render();
    },
    // 渲染作家偏好条形图
    inintBar3() {
      let _height = this.barData3.length * 26;
      this.barChange3 = new Chart({
        container: "bar-chart3",
        autoFit: true,
        autoHide: false,
        height: _height,
      });
      this.barChange3.data(this.barData3.reverse());
      this.barChange3.scale({
        value: {
          max: 150,
          min: 0,
          alias: " ",
        },
      });
      this.barChange3.axis("name", {
        title: null,
        tickLine: null,
        grid: null,
        line: null,
      });

      this.barChange3.axis("value", {
        label: null,
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              fillOpacity: 0,
              strokeOpacity: 0,
            },
          },
        },
        title: null,
      });
      this.barChange3.legend(false);
      this.barChange3.coordinate().transpose();
      this.barChange3.tooltip(false);
      this.barChange3
        .interval()
        .position("name*value")
        .size(8)
        .label("value", {
          style: {
            fill: "#7789af",
            autoHide: false,
          },
          // offset: 10,
          content: (originData) => {
            return originData.value + "%";
          },
          remove: false,
        });
      // chart.interaction("element-active");
      this.barChange3.render();
    },
    // 头部切换机构触发
    publisherChange() {
      this.isLoading = true;
      this.getData();
    },
  },
};
</script>
